const _chunkRender = (data, handleFn, chunkFn) => {
  if(!data.length) return;

  let i = 0;
  function runNext() {
    if(i >= data.length) return;
    chunkFn((goOn) => {
      while(goOn() && i < data.length) {
        handleFn(i, data[i])
        i++;
      }
      // 分片完成
      runNext();
    })
  }
  runNext();
}

const browserChunkRender = (data, handleFn) => {
  const chunkFn = (task) => {
    // requestIdleCallback是什么？
    // 浏览器自带的API，在每个渲染帧中完成渲染后剩余的时间
    // 浏览器在一帧中的工作流程：输入事件 → 执行任务 → 帧开始 → 执行 RAF → 布局 → 绘制 → 空闲时间(requestIdleCallback 在这里执行)
    requestIdleCallback((idl) => {
      // idl.timeRemaining() 返回空闲时间，单位为毫秒
      task(() => idl.timeRemaining() > 2);
    })
  }
  _chunkRender(data, handleFn, chunkFn);
}

export { _chunkRender };
export { browserChunkRender }